:root {
  --animate-duration: 300ms;
  --animate-delay: 0.5s;
  // 布局颜色
  --layout-color: #fff;
  // 容器颜色
  --container-color: #f6f9fb;
  // 基本文本颜色
  --base-text-color: #333;
  // 悬停颜色
  --hover-color: #eceded;
  // 取消按钮颜色
  --cancel-color: #ccc;
  // tab颜色
  --tab-color: #f3f6f9;
  // tab阴影
  --tab-box-shadow: -1px -1px 0px 0px rgba(255, 255, 255, 1),
    1px 1px 0 0 rgba(0, 0, 0, 0.1);
  // tab激活阴影
  --tab-active-box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0px 0px rgba(255, 255, 255, 1);
}

html[data-theme='dark'] {
  --layout-color: #1a1a1a;
  --container-color: #2d2d2d;
  --hover-color: #3a3a3a;
  --tab-color: #2d2d2d;
  --tab-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1),
    1px 1px 0 0 rgba(0, 0, 0, 0.1);
  --tab-shadow-active: inset 1px 1px 0 0 rgba(0, 0, 0, 0.1);
}
